<template>
  <BackHeader :title="$t('activity.checkin.page_title')" />
  <div class="app_center activity-page">
    <CardBox :vipAssets="vipAssets" :activityData="activityData" @handleCheckIn="handleCheckIn"
      @initConfig="initConfig" />
    <LevelBox :vipAssets="vipAssets" :activityData="activityData" />
    <Footer :vipAssets="vipAssets" :activityData="activityData" />
  </div>

  <!-- 结果对话框：显示中奖结果 -->
  <CommonResultDialog :show="resultProps.show" :title="$t('activity.checkin.result_title')"
    :desc="$t('activity.checkin.result_desc')" :btn="$t('activity.common.confirmar')" :amount="resultProps.amount"
    icon="/images/activity/common/Coin_Bg 1.png" @close="resultProps.show = false" @sure="resultProps.show = false" />

  <!-- 签到对话框：处理签到 -->
  <ChekIn :show="chekInProps.show" :activityData="activityData" @close="chekInProps.show = false" @checkIn="receive"
    @deposite="handleDeposite" />

  <!-- 充值对话框：处理用户充值 -->
  <DepDialog :show="depProps.show" :form-data="depProps.formData" @close="depProps.show = false"
    @success="initConfig" />

</template>

<script setup lang="ts">
// 组件导入
import CardBox from "./components/CardBox.vue";
import LevelBox from "./components/LevelBox.vue";
import Footer from "./components/Footer.vue";
import ChekIn from "./components/ChekIn.vue";
import DepDialog from "~/components/Carteira/components/DepDialog.vue";

// ----------------------------------
// 状态与常量（UI 对话框、活动数据、展示资产）
// ----------------------------------
// 签到对话框状态
const chekInProps = reactive({
  show: false,
})

// 充值对话框状态
const depProps = reactive({
  show: false,
  formData: {
    payNum: 0,
  },
})

// 结果对话框状态
const resultProps = reactive({
  show: false,
  amount: '0',
})

// 活动数据（从接口获取后写入）
const activityData: any = ref({})

// VIP 等级静态资源（按下标与 level_rewards 对齐）
const vipAssets = [
  { name: $t('activity.checkin.level_ferro'), image: "/images/user/vipSignIn_0.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_bronze'), image: "/images/user/vipSignIn_1.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_prata'), image: "/images/user/vipSignIn_2.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_ouro'), image: "/images/user/vipSignIn_3.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_platina'), image: "/images/user/vipSignIn_4.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_diamante'), image: "/images/user/vipSignIn_5.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_mestre'), image: "/images/user/vipSignIn_6.png", upgrade_cond: '0', reward: '0' },
  { name: $t('activity.checkin.level_lendario'), image: "/images/user/vipSignIn_7.png", upgrade_cond: '0', reward: '0' },
]

// ----------------------------------
// 事件处理（打开/关闭各类对话框）
// ----------------------------------
function handleCheckIn() {
  chekInProps.show = true
}

function receive() {
  // 调用领取奖励接口
  apo.activity.claimActivityReward(52, (error: any) => {
    if (error) {
      apo.logger.error('claimActivityReward error:', error)
      return
    }
    chekInProps.show = false
    resultProps.show = true
    resultProps.amount = activityData.value?.free_bonus || '0'
    initConfig()
  })
}

function handleDeposite() {
  chekInProps.show = false
  depProps.show = true
  depProps.formData.payNum = activityData.value?.recharge_cond || '0'
}

// ----------------------------------
// 数据获取与转换（初始化活动配置）
// ----------------------------------
function initConfig() {
  // 获取活动详情：id = 52
  apo.activity.getActivityDetailInfo(52, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getActivityDetailInfo error:', error)
      return
    }

    // 1) 保障字段存在
    data.level_rewards = data.level_rewards || []

    // 2) 等级从小到大排序，便于与静态资源一一对应
    data.level_rewards.sort((a: any, b: any) => a.level - b.level)

    // 3) 合并静态资源与后端数据，增加 UI 辅助字段
    data.level_rewards = data.level_rewards.map((item: any, index: number) => {
      const assets: any = vipAssets[index] || {}
      return {
        ...item,
        ...assets,
        // 是否达到该等级（用于高亮）
        isChecked: data.level >= item.level,
        // 线条样式（UI 展示用）
        lineWidth: '1.8rem',
        lineRight: index === (data.level_rewards.length - 1) ? "0.5rem" : '0.2rem'
      }
    })

    // 4) 写入页面可响应数据
    activityData.value = data
  })
}

// ----------------------------------
// 生命周期（进入时拉取配置）
// ----------------------------------
onActivated(() => {
  initConfig()
})
</script>

<style scoped lang="scss"></style>
